<template>
  <div style="position: relative">
    <el-card
      ><div class="main">
        <div class="left"></div>
        <div class="right">
          <div class="right_item">
            <div class="right_top">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }"
                  >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="search">
              <i class="el-icon-close del" @click="fn"></i>
              <el-input
                placeholder="请输入内容"
                v-model="input3"
                class="input-with-select"
                style="width: 344px"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="search"
                ></el-button>
              </el-input>
              <el-button type="primary" style="margin-left: 10px" @click="addFn"
                >添加分类</el-button
              >
              <el-dialog title="商品添加" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商品价格" :label-width="formLabelWidth">
                    <el-input
                      v-model.number="form.price"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品数量" :label-width="formLabelWidth">
                    <el-input
                      v-model.number="form.num"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品重量" :label-width="formLabelWidth">
                    <el-input
                      v-model.number="form.weight"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="addPutFn">确 定</el-button>
                </div>
              </el-dialog>
            </div>
            <div class="table">
              <el-table :data="shoppingArr" border style="width: 100%">
                <el-table-column type="index" label="" width="50">
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="720">
                </el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)">
                </el-table-column>
                <el-table-column prop="goods_weight" label="商品重量">
                </el-table-column>
                <el-table-column
                  prop="upd_time"
                  label="创建时间"
                  width="200"
                  :formatter="formatTime"
                >
                </el-table-column>
                <el-table-column prop="" label="操作" class="del">
                  <template slot-scope="scope">
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      class="del"
                      @click="removeUserById(scope.row.goods_id)"
                    >
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="page">
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="sum"
                  v-model="currentPage4"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { CateAPI, CateDelAPI, CateAddAPI } from "../../api/index";
import axios from "@/utils/request";
export default {
  async created() {
    const res = await CateAPI({
      pagenum: 1,
      pagesize: 10,
    });
    console.log(res);
    this.shoppingArr = res.data.data.goods;
    if (this.shoppingArr.length !== 0) {
      // alert('数据获取成功')
    }
    console.log(this.shoppingArr);
  },
  data() {
    return {
      input3: "",
      shoppingArr: [],
      currentPage4: 1,
      num: 5,
      searchVal: "",
      subArr: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      sum: 870,
      form: {
        name: "",
        price: 0,
        num: 0,
        weight: 0,
      },
      formLabelWidth: "120px",
    };
  },

  methods: {
    //封装列表获取
    getList() {
      if (this.shoppingArr.length !== 0) {
        this.$message({
          message: "列表信息获取成功",
          type: "success",
        });
      } else {
        this.$message.error("列表信息获取失败");
      }
    },
    //处理时间戳
    formatTime(row, column) {
      let data = row[column.property] * 1000;
      let dtime = new Date(data);
      const year = dtime.getFullYear();
      let month = dtime.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let day = dtime.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      let hour = dtime.getHours();
      if (hour < 10) {
        hour = "0" + hour;
      }
      let minute = dtime.getMinutes();
      if (minute < 10) {
        minute = "0" + minute;
      }
      let second = dtime.getSeconds();
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    //封装get数据
    async getGoods(val, val1) {
      this.num = val;
      const res = await CateAPI({
        pagenum: val1 || 1,
        pagesize: val || 10,
      });
      console.log("res.data.data.goods: ", res.data.data.goods);
      this.shoppingArr = res.data.data.goods;
      this.sum = res.data.data.total;
      console.log(this.shoppingArr);
    },
    //封装post请求
    async getAddGood() {
      const res = await CateAddAPI({
        goods_cat: "1,2,3",
        goods_number: this.form.num,
        goods_price: this.form.price,
        goods_weight: this.form.weight,
        goods_name: this.form.name,
      });
      console.log(res);
      if (res.data.meta.status === 201) {
        this.$message({
          message: "数据添加成功",
          type: "success",
        });
      } else {
        this.$message.error("数据添加失败");
      }
      this.getGoods();
    },
    //分页传递页码
    handleSizeChange(val) {
      this.getGoods(val, this.currentPage4);
      // this.getList()
    },
    //分页传递每页多少条数据
    handleCurrentChange(val1) {
      this.getGoods(this.num, val1);
      this.getList();
    },
    //模糊搜索
    search() {
      //定义关键字
      const reg = new RegExp(this.input3); // 创建正则表达式
      // this.getGoods()
      for (let i = 0; i < this.shoppingArr.length; i++) {
        if (reg.test(this.shoppingArr[i].goods_name)) {
          this.subArr.push(this.shoppingArr[i]);
        }
      }
      this.shoppingArr = this.subArr;
      this.getList();
    },
    fn() {
      this.input3 = "";
      if (this.input3.length === 0) {
        this.getGoods();
      }
    },
    //数据添加
    addFn() {
      this.dialogFormVisible = true;
    },
    addPutFn() {
      (this.dialogFormVisible = false), this.getAddGood();
    },
    //数据删除
    removeUserById(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            url: `/goods/${id}`,
            method: "delete",
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getGoods();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      console.log(typeof id);
      console.log("id: ", id);

      // console.log(res);
      // const res = await CateDelAPI(
      //   id
      // )
    },
  },
};
</script>

<style scoped>
body {
  background-color: #eaedf1;
}

.top {
  width: 100%;
  height: 60px;
}

.main {
  display: flex;
}

/* .main .left {
  width: 200px;
  height: 100%;
} */

.main .right {
  /* padding: 20px; */
  width: 100%;
  /* height: 920px; */
}

.main .right .right_item {
  /* padding: 20px; */
  width: 100%;
  /* height: 820px; */
  background-color: #fff;
  /* margin-top: 20px; */
}

.main .right .right_item .search {
  width: 100%;
  position: relative;
  margin-top: 15px;
  margin-bottom: 15px;
}

.main .right .right_item .search .del {
  position: absolute;
  z-index: 10;
  z-index: 10;
  left: 260px;
  top: 10px;
}

.del {
  flex: 1;
  vertical-align: center;
}
</style>